<template>
	<view>
		<view class="gift_bg">
			<view class="gift_date">
				<view class="example-body">
					<uni-datetime-picker v-model="range" type="daterange" @change="changeLog"/>
				</view>
				<view class="flex_between">
					<uni-data-picker v-if="info.type==1" :map="{text:'areaname',value:'id'}" placeholder="请选择市" popup-title="请选择市" :localdata="cityList" v-model="cityId" @change="onchangeCity"></uni-data-picker>
					<uni-data-picker v-if="info.type==1||info.type==2" placeholder="请选择区县" popup-title="请选择区县" :map="{text:'areaname',value:'id'}" :localdata="areaList" v-model="areaId" @change="onchangeArea"></uni-data-picker>
					<view class="query_btn" :style="[{'width':info.type==3?'100%':''}]" @click="querySubmit">查询</view>
				</view>
			</view>
			<view class="gift_total">
				<view class="gift_t_item gift3" @click="changeType(0)">
					<view class="gift_nav" :class="{'gift_nav_active':type==0}">全部</view>
				</view>
				<view class="gift_t_item gift3" @click="changeType(1)">
					<view class="gift_nav" :class="{'gift_nav_active':type==1}">待结算</view>
				</view>
				<view class="gift_t_item gift3" @click="changeType(2)">
					<view class="gift_nav" :class="{'gift_nav_active':type==2}">已结算</view>
				</view>
			</view>
		</view>
		<view class="c_Divdenlist">
			<view class="c_Divdenlists" v-for="(item,index) in list">
				<view class="flex_between">
					<view class="c_flex_1">
						<view class="flex_box">
							<text class="flex_status status_1" v-if="item.ordersn.includes('ZZ')">门店</text>
							<text class="flex_status status_2" v-if="item.ordersn.includes('SH')">商城</text>
							<text class="flex_status status_3" v-if="item.ordersn.includes('TG')">团购</text>
							<text class="clamp s_supname">{{item.supname}}</text>
						</view>
						<view class="">
							下单时间：{{item.createtime}}
						</view>
						<view v-if="item.finishtime&&item.finishtime!=''">
							完成时间：{{item.finishtime}}
						</view>
						<view v-if="item.jiesuantime&&item.jiesuantime!=''">
							结算时间：{{item.jiesuantime}}
						</view>
						<view class="ordersnum">
							编号：<text selectable="true">{{item.ordersn}}</text>
						</view>
					</view>
					<view class="c_info">
						<view class="" style="color: #000;">支付<text class="c_Divedentype"> {{item.price}}</text></view>
						<view class="" style="color: #666;">佣金奖励 <text class="c_Divedentype1">+{{item.bg_money}}</text> </view>
						<view class="c_Divedentype2">{{item.status}}</view>
					</view>	
				</view>
				<view class="ordersnum">
					区域：<text selectable="true">{{item.address}}</text>
				</view>
			</view>
		</view>
		<view class="empty_loading">
			<image v-if="isloading" src="/static/business/loading.gif" ></image>
			<view v-if="ismore">到底了~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				range: ['',''],
				list: [],
				info: [],
				page: 0,
				isloading: false,
				ismore: false,
				type: 0,
				addressList: [],
				cityId: '',
				areaId: '',
				addressId: '',
				level: 1,//1省 2市 3区
				cityList: [],//市列表
				areaList: []//区列表
			};
		},
		onLoad() {
			this.getInfo();
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			// 类型切换
			changeType(id){
				if(id == this.type) return;
				this.type = id;
				this.page = 0;
				this.list = [];
				this.getList();
			},
			// 选择时间
			changeLog(e){
				if(e.length<=0) this.range = ['',''];
			},
			// 选择市
			onchangeCity(e){
				if(e.detail.value.length>0){
					this.getArea(e.detail.value[0].value);
				}else{
					this.cityId = '';
					this.addressId = '';
					this.areaId = '';
					this.level = 1;
				}
			},
			// 选择区
			onchangeArea(e){
				if(e.detail.value.length==0){
					this.areaId = '';
					this.addressId = '';
					this.level = 1;
				}
			},
			// 查询
			querySubmit(){
				this.page = 0;
				this.list = [];
				if(this.range.length==0) this.range = ['',''];
				this.getList();
			},
			// 列表
			getList(){
				this.page++;
				this.isloading = true;
				if(this.cityId!=''){
					this.addressId = this.cityId;
					this.level=2;
				}
				if(this.areaId!=''){
					this.addressId = this.areaId;
					this.level=3;
				}
				this.$axios('RegionalService/incomeDetails', "POST", 'regional', {
					page: this.page,
					start: this.range[0],
					end: this.range[1],
					status: this.type,
					addressId: this.addressId,
					level: this.level,
				}).then(res => {
					this.isloading=false;
					if (res.data.code == 200) {
						this.list = [...this.list,...res.data.data.list];
						this.ismore = res.data.data.list.length<=0;
					}
				})
			},
			getInfo(){
				this.$axios('RegionalService/incomeDetailsCity', "POST", 'regional').then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
						// this.info.type=2;
						if(this.info.type==1){
							this.getAddress(this.info.parentid);
						}
						if(this.info.type==2){
							this.getArea(this.info.parentid)
						}
					}
				})
			},
			// 市
			getAddress(id) {
				this.$axios('getaddress/info', "POST", 'shop', {
					type: 'city',
					parentid: id
				}).then(res => {
					if (res.data.code == 200) {
						this.cityList = res.data.data.data;
					}
				})
			},
			// 区
			getArea(id){
				this.$axios('getaddress/info', "POST", 'shop', {
					type: 'district',
					parentid: id
				}).then(res => {
					if (res.data.code == 200) {
						this.areaList = res.data.data.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #FBF8FE;
	padding-bottom: 100rpx;
}
.gift_bg{
	position: fixed;
	width: 100%;
	background: #FBF8FE;
	z-index: 2;
	padding-bottom: 20rpx;
}
.gift_date{
	margin: 0 20rpx;
	border-radius: 4px;
}
.example-body{
	margin-bottom: 20rpx;
}
.uni-data-tree{
	width: 250rpx;
	background: #fff;
}
.query_btn{
	width: 150rpx;
	background: $bg-color;
	text-align: center;
	line-height: 70rpx;
	border-radius: 10rpx;
	color: #fff;
}
.gift_total{
	display: flex;
	justify-content: space-around;
	padding: 10rpx 0 20rpx;
	.gift_t_item{
		font-size: 24rpx;
		color: #666666;
		text-align: center;
		.gift_t_num{
			font-size: 32rpx;
			font-weight: 600;
			margin-top: 10rpx;
			color: #333;
		}
		.gift_nav{
			font-size: 28rpx;
			margin-bottom: -18rpx;
			border-radius: 16rpx;
			padding: 10rpx 0;
			border: 2rpx solid #8615E1;
			color: #8615E1;
			margin-top: 10rpx;
		}
		.gift_nav_active{
			color: #fff;
			background: #9532E4;
		}
	}
	.gift3{
		width: 26%;
	}
}
.c_Divdenlist{
	padding-top: 244rpx;
}
.c_Divdenlist{
	position: relative;
	z-index: 1;
}
.c_Divdenlists {
	padding: 20rpx;
	background: #fff;
	margin-top: 20rpx;
	font-size: 26rpx;
	line-height: 42rpx;
	box-shadow: 0px 12rpx 16rpx 0px rgba(0, 0, 0, 0.1);
	.c_flex_1{
		width: calc(100% - 234rpx);
		padding-right: 20rpx;
		.s_supname{
			margin-left: 8rpx;
			flex: 1;
		}
	}
	.c_info{
		width: 234rpx;
	}
	.c_Divedentype {
		padding-top: 10upx;
		color: #000;
		font-weight: bold;
	}
	.c_Divedentype1{
		color: #e10602;
		font-weight: bold;
	}
	.c_Divedentype2{
		color: #000;
		font-weight: bold;
	}
	.flex_status{
		color: #fff;
		font-size: 24upx;
		font-weight: bold;
		text-align:center;
		padding:0px 2px;
		border-radius:4px;
	}
	.status_1{
		border:1px solid #e3452c;
		background: #e3452c;
	}
	.status_2{
		border:1px solid $bg-color;
		background:$bg-color;
	}
	.status_3{
		border:1px solid #06803A;
		background:#06803A;
	}
}
</style>
